<template>
  <div id="app" >

    <div class="app-container"  >

      <div >
        <Menu :isCollapse="isCollapse" @on-result-change="menuClick" ></Menu>
      </div>

      <!-- 主内容区域 -->
      <div class="main-content" :style="contentStyle" >
        <!-- 顶部栏 -->
        <div class="top-bar">
          <div class="left-section">
            <i class="el-icon-s-fold toggle-button" @click="toggleMenu"></i>
          </div>

          <div class="user-info" style="float: right">
            <el-badge :value="msgCount" style="margin-top: 20px;margin-right: 40px" >
              <div @click="msgLook" class="msg-avatar">消息</div>
            </el-badge>

            <div style="color: #1db396;margin-right: 10px;font-size: 15px"> 欢迎您，{{ realName }}</div>
            <el-dropdown>
              <i  style="margin-right: 1px">
                <el-image
                  style="width: 40px; height: 40px;margin-top: 5px;border-radius: 50%;"
                  :src="this.imageUrl"></el-image>

              </i>
<!--              <el-dropdown-menu slot="dropdown">-->
<!--                <el-dropdown-item  @click.native="_lookUserInfo">查看</el-dropdown-item>-->
<!--                <el-dropdown-item @click.native="_loginOut">退出</el-dropdown-item>-->
<!--              </el-dropdown-menu>-->
              <el-dropdown-menu slot="dropdown" style="padding: 5px">
                <el-dropdown-item icon="el-icon-thumb">查看</el-dropdown-item>
                <el-dropdown-item icon="el-icon-switch-button" @click.native="_loginOut">退出</el-dropdown-item>
              </el-dropdown-menu>

            </el-dropdown>
          </div>


        </div>

        <!-- 内容区域 -->
        <div   style="margin-left: 10px" >
          <div>
            <router-view ></router-view>
          </div>
        </div>

      </div>



    </div>


  </div>
</template>

<script>
import Menu from '../components/common/Menu'

export default {

  components:{
    Menu,
  },
  data(){
    return {
      websocket:null,
      changeStyle:"",
      menuStyle:"",
      msgCount:0,
      height:"",
      contentStyle:"",
      imageUrl:'http://127.0.0.1:9686/file/direct/0/8501fcc60a1049bd93fa2adc1aead70b.png',
      searchCriteria: '',
      showIcon: true,
      isCollapse: false,
      realName:localStorage.getItem('realName'),
      scaleRadio:1,
      windowHeight: document.body.clientHeight,
      windowWidth: document.body.clientWidth,
    }
  },
  mounted(){
    this._getUserInfo();
    this._getMsgCount();
  },
  created(){
    this.initWebSocket();
  },
  methods:{


    initWebSocket: function (){
      let userId = localStorage.getItem('userId');

      // 已经连接则不再重复连接
      if (undefined!==userId) {
        if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
          return;
        }
        let baseUrl = process.env.VUE_APP_BASE_URL;
        let token=  localStorage.JWT_TOKEN;
        let webSocketUrl = "ws://"+baseUrl+"/websocket/"+userId+"?token="+token;
        this.websocket = new WebSocket(webSocketUrl);

        this.websocket.onopen = this.webSocketOnOpen;
        this.websocket.onerror = this.webSocketOnError;
        this.websocket.onmessage = this.webSocketOnMessage;
        this.websocket.onclose = this.webSocketClose;
      }
    },
    webSocketOnOpen: function () {
      console.log("WebSocket连接成功");
    },
    webSocketOnError: function (e) {
      console.log("WebSocket连接发生错误",e);
    },
    webSocketOnMessage: function (e) {
      this._msgManage(e.data)
      this._getMsgCount()
    },
    webSocketClose: function (e) {
      console.log("connection closed (" + e + ")");
    },

    _msgManage(msg){
      if (msg!==null&&undefined!==msg&&''!==msg){
        this.$notify.info({
          title: '消息',
          message: msg
        });
      }

    },
    _getMsgCount(){
      this.$http.get('/api/base/sys_msg_rel_user/getMsgCount').then(res=>{
        let returnData=res.data

        if (undefined === returnData || '' ===returnData){
          this.$router.push({path:'/login',query:{}});
        }else{
          this.msgCount = returnData.data
        }


      }).catch(err=>{
        console.log(err)
      })
    },

    handleIconClick(ev) {
      console.log(ev);
    },
    toggleMenu() {
      this.isCollapse = !this.isCollapse;
    },
    menuClick(data){
      let key = data.key;
      let keyPath = data.keyPath;
      if (keyPath[1]===undefined){
        this.$router.push({ path: key });
      }else{
        this.$router.push({ path: keyPath[1] });
      }
    },
    msgLook(){

      this.$router.push({path:'/msg/my_msg',query:{}});

    },

    _getUserInfo(){

      let userInfo=  localStorage.getItem('userInfo')
      console.log('-----------------user',userInfo)
      if (null === userInfo || undefined === userInfo){
        this.$router.push({path:'/login',query:{}});
      }else{
        this.$router.push({path:'/',query:{}});
        this.action = localStorage.getItem('action')
        this.imageUrl = localStorage.getItem('headerImageUrl')
        this.userName = localStorage.getItem('userName')
        if (undefined!==localStorage.getItem('msgCount')&&null!=localStorage.getItem('msgCount')){
          this.msgCount = localStorage.getItem('msgCount');
        }
      }
    },

    _loginOut(){

      this.$confirm('是否退出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        localStorage.clear()
        this.$http.post('/api/base/auth/logout').then(res=>{
          this.$router.push({path:'/login',query:{}});
        }).catch(err=>{
          this.$router.push({path:'/login',query:{}});
          console.log(err)
        })
      }).catch(() => {

      });
    },


  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  overflow-x: hidden !important;


}
#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-container {
  text-align: left;
  display: flex;
  justify-content: space-around;
}

/* 左侧菜单样式 */
.el-menu-vertical-demo {
  width: 220px;
  min-height: 100vh;
  background-color: #304156;
  border-right: none;
  transition: width 0.3s;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
}

.el-menu--collapse {
  width: 64px;
}

.el-menu {
  border-right: none;
}

.el-submenu__title, .el-menu-item {
  height: 50px;
  line-height: 50px;
  color: #bfcbd9;
}

.el-menu-item {
  font-size: 14px;
}

.el-submenu__title i, .el-menu-item i {
  color: #bfcbd9;
  margin-right: 10px;
}

.el-menu-item:hover, .el-submenu__title:hover {
  background-color: #263445 !important;
  color: #fff !important;
}

.el-menu-item:hover i, .el-submenu__title:hover i {
  color: #fff !important;
}

.el-menu-item.is-active {
  background-color: #1890ff !important;
  color: #fff !important;
}

.el-menu-item.is-active i {
  color: #fff !important;
}

/* 顶部栏样式 */
.top-bar {
  height: 50px;
  background-color: #f5f7fa;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
}

.toggle-button {
  font-size: 20px;
  cursor: pointer;
  color: #666;
}

.user-info {
  display: flex;
  align-items: center;
}

.msg-avatar {
  width: 40px;
  height: 40px;
  color: cornflowerblue;
  display: flex;
  font-weight: bold;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1890ff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-weight: bold;
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%

}

.content {
  flex: 1;
  padding: 20px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #304156;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
}

.content-card {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 180px;
  }

  .content {
    padding: 15px;
  }
}

@media (max-width: 576px) {
  .app-container {
    flex-direction: column;
  }

  .el-menu-vertical-demo {
    min-height: auto;
    width: 100% !important;
  }

  .el-menu--collapse {
    width: 100%;
  }

  .el-submenu__title, .el-menu-item {
    height: 45px;
    line-height: 45px;
  }
}

/* 菜单logo样式 */
.menu-logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-logo img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.menu-logo span {
  transition: opacity 0.3s;
}

.el-menu--collapse .menu-logo span {
  opacity: 0;
  width: 0;
  display: inline-block;
  overflow: hidden;
}
.con_section{
  position: absolute;
  top: 0px;
  bottom: 0px;
  left:0px;
  width:100%;
}
.el-menu-item.is-active {
  color: #67c23a;
}
.header-logo{
  float: left;
  height: 60px;
  margin: 0 20px;
  width: 300px;
}
ul.el-menu {
  background: #e4e8f1;
}
.user-info{
  //position: absolute;
  right: 0;
}
.el-submenu__title{
  background:#eef1f6;
}
.el_main{
  padding:0px;
}
.home_main{
  padding:10px;
}
.breadcrumb-container .title {
  float: left;
  color: #475669;
  font-size: 13px;
}
.breadcrumb-inner {
  float: right;
  font-size: 13px;
}
.el-breadcrumb__inner, .el-breadcrumb__inner a {
  font-weight: 400;
}
.el-container.is-vertical{
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
}




</style>
